<template>
  <div class="edit_profile">
    <hm_header title="个人信息编辑">
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
      <template #right>
        <van-icon name="wap-home-o" @click="$router.push({name:'index'})" />
      </template>
    </hm_header>
    <div class="cover">
      <img :src="user.head_img" alt />
      <van-uploader :after-read="afterRead" />
    </div>
    <hm_cell title="昵称" :desc="user.nickname" @click.native="editnicknamedialog"></hm_cell>
    <van-dialog v-model="nickshow" title="编辑昵称" show-cancel-button @confirm="editnickname">
      <van-field v-model="nickname" required label="昵称" placeholder="请输入昵称" />
    </van-dialog>
    <hm_cell title="密码" desc="******" @click.native="passshow=!passshow,oldPass=newPass=''"></hm_cell>
    <van-dialog
      v-model="passshow"
      title="编辑密码"
      show-cancel-button
      @confirm="editPass"
      :beforeClose="beforeClose"
    >
      <van-field v-model.trim="oldPass" required label="原密码" placeholder="请输入原密码" />
      <van-field v-model.trim="newPass" required label="新密码" placeholder="请输入新密码" />
    </van-dialog>
    <hm_cell title="性别" :desc="user.gender?'男':'女'" @click.native="gendershow=!gendershow"></hm_cell>
    <van-action-sheet
      v-model="gendershow "
      :actions="actions"
      @select="onSelect"
      :close-on-click-action="true"
    />
  </div>
</template>

<script>
import hm_header from "@/components/hm_header.vue";
import hm_cell from "@/components/hm_cell.vue";
import { uploadfile } from "@/apis/fileUpload.js";
import { getUserDeil, editUser } from "@/apis/user.js";
import axios from "@/utils/request.js";
export default {
  components: {
    hm_header,
    hm_cell
  },
  data() {
    return {
      show: false,
      user: {},
      nickshow: false,
      nickname: "",
      passshow: false,
      oldPass: "",
      newPass: "",
      gendershow: false,
      actions: [{ name: "男" }, { name: "女" }]
    };
  },
  methods: {
    async onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      // console.log(item);
      let gender = item.name == "男" ? 1 : 0;
      let res = await editUser(this.$route.params.id, {
        gender
      });
      console.log(res);
      this.$toast.success(res.data.message);
      // console.log(gender);

      this.user.gender = gender;
    },

    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      let formdata = new FormData();
      formdata.append("file", file.file);
      uploadfile(formdata)
        .then(res => {
          // console.log(res.data.message);

          if (res.data.message == "文件上传成功") {
            this.user.head_img = axios.defaults.baseURL + res.data.data.url;
            // console.log(this.$route.params.id);

            editUser(this.$route.params.id, { head_img: res.data.data.url })
              .then(res => {
                this.$toast.success("用户头像修改成功");
                console.log(res);
              })
              .catch(err => {
                console.log(err);
                this.$toast.fail("用户头像修改失败");
              });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    editnicknamedialog() {
      this.nickshow = !this.nickshow;
      this.nickname = this.user.nickname;
    },
    editnickname() {
      editUser(this.$route.params.id, { nickname: this.nickname })
        .then(res => {
          console.log(res);
          this.user.nickname = this.nickname;
          this.$toast.success("昵称修改成功");
        })
        .catch(err => {
          console.log(err);
        });
    },
    async editPass() {
      if (this.oldPass == this.user.password) {
        if (/^.{3,6}$/.test(this.newPass)) {
          let res = await editUser(this.$route.params.id, {
            password: this.newPass
          });
          if (this.oldPass == this.newPass)
            return this.$toast.fail("原密码和新密码不能一样");
          console.log(res);
          this.$toast.success(res.data.message);
          this.user.password = this.newPass;
        } else {
          this.$toast.fail("用户密码修改失败");
        }
      } else {
        this.$toast.fail("用户密码修改失败");
      }
    },
    beforeClose(action, done) {
      // console.log(action);
      if (action == "confirm") {
        let newPass = /^.{3,6}$/.test(this.newPass);
        if (
          this.oldPass !== this.user.password ||
          !newPass ||
          this.oldPass == this.newPass
        ) {
          done(false);
        } else {
          done();
        }
      } else {
        done();
      }
    }
  },
  mounted() {
    this.id = this.$route.params.id;
    getUserDeil(this.id)
      .then(res => {
        // console.log(res);
        this.user = res.data.data;
        this.user.head_img = axios.defaults.baseURL + this.user.head_img;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style lang="less" scoped>
.edit_profile {
  .cover {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    position: relative;

    img {
      width: 90px;
      height: 90px;
      display: block;
    }
    .van-uploader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /deep/ .van-uploader__upload {
        width: 90px;
        height: 90px;
        margin: 0;
        opacity: 0;
      }
    }
  }
}
</style>